<template>
  <div class="random-configuration">
    <je-form-item
      :label="$t('randomConfiguration.teamName')"
      name="teamName"
      v-bind="validateInfos.teamName"
    >
      <je-input v-model:value="formState.teamName" />
    </je-form-item>
    <je-form-item :label="$t('randomConfiguration.distributeRandom')" name="distributeRandom">
      <je-switch
        v-model:value="formState.distributeRandom"
        mode="checkbox"
        :disabled="formState.distributedPolling == '1'"
      />
      <span class="prompt">{{ $t('randomConfiguration.distributeRandomContext') }}</span>
    </je-form-item>
    <je-form-item :label="$t('randomConfiguration.distributedPolling')" name="distributedPolling">
      <je-switch
        v-model:value="formState.distributedPolling"
        mode="checkbox"
        :disabled="formState.distributeRandom == '1'"
      />
      <span class="prompt">{{ $t('randomConfiguration.distributedPollingContext') }}</span>
    </je-form-item>
  </div>
</template>

<script>
  import { defineComponent, ref, watch, reactive } from 'vue';
  import { Form, Switch, Input } from '@jecloud/ui';
  import { verifyData } from '@/helper/common';
  const useForm = Form.useForm;
  export default defineComponent({
    name: 'RandomConfiguration',
    components: {
      JeFormItem: Form.Item,
      JeSwitch: Switch,
      JeInput: Input,
    },
    props: {
      randomConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      nodeId: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      //表单数据
      const formState = ref(props.randomConfig);

      watch(
        () => props.nodeId,
        () => {
          formState.value = props.randomConfig;
        },
      );

      //字段校验规则
      const rulesRef = reactive({
        teamName: verifyData.name,
      });
      const { validate, validateInfos } = useForm(formState, rulesRef, {
        onValidate: (...args) => {},
      });

      return { formState, validateInfos, validate };
    },
  });
</script>
